<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>计划管理</title>
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css">
    <script type="text/javascript" src="/js/news/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/lay/dest/layui.all.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/highcharts.js"></script>


    <style>
        * {font-family: "Microsoft Yahei" !important;overflow-y: hidden;}
        nav button{
            margin-left: 5px;
            padding: .25rem .5rem;
            font-size: .875rem;
            border-radius: .2rem;
            margin-top: 10px;
        }
        nav div{
            float: right !important;
            margin: 15px;
        }
        nav{
            height: 50px;
            border-bottom: 1px solid #cfdbe2;
            background-color: #fafbfc;
            border-radius: 0;
        }
        .layui-tab{
            margin:0;
        }
        .content{
            height: 544px;
            overflow: auto;
            margin: 14px;
            padding: 14px;
            background: #fff;
        }
        .layui-tab-content{
            background-color: #F5F7FA;
        }
        .search{
            display: inline;
            margin-bottom: 1px;
            width: 185px;
            border: 0;
            background: #fafbfc;
        }
        .allBtn{
            float: left !important;
            margin-top: 10px;
            width: 70px;

            border: none;
            background: #fafbfc;
        }
        .screen{
            float: left !important;
            margin-top: 10px;
            width: 70px;
            margin-left: 27px;
            border-radius: 5px;
            color: black;
            border-color: #03a9f4;
            background: #fafbfc;
            border: none;
        }
        .one{
            border: 1px solid #03a9f4;
            border-radius: 5px;
            color: #03a9f4;
            border-color: #03a9f4;
            background: #fafbfc;
        }
        div .layui-input-inline{
            padding-left: 25px;
        }
        .planType{
            line-height: 45px;
            padding-left: 20px;
        }
        .planType:hover {
            border-color: #ececec;
            background-color: #ececec;
        }
        .del{
            float: right;
            margin: 10px;
        }
        .menu {
            position: absolute;
            top: 38px;
            left: 116px;
            z-index: 1000;
            display: none;
            float: left;
            min-width: 160px;
            padding: 5px 0;
            margin: 2px 0 0;
            font-size: 1rem;
            color: #373a3c;
            text-align: left;
            list-style: none;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid rgba(0,0,0,0.15);
            border-radius: .25rem;
        }
        .menu ul{
            float: right;
            margin-left: 25px;
        }
        .menu ul li{
            float: right;
            background: white;
            padding: 0 15px;
        }
    </style>
</head>
<body>
<form class="layui-form layui-row">
    <div class="layui-col-md3" id="leftTree">
        <nav style="border-right: 1px solid #cfdbe2; " class="layui-collapse" lay-filter="leftTree">
            <p style="margin-left:15px ;margin-top: 15px">计划管理
                <%--<button type="button" class="layui-btn layui-btn layui-btn-primary layui-btn layui-btn-sm add" style="margin-left: 220px ; margin-top: 0px">新建</button>--%>
            </p>
        </nav>
        <div class="" style="border-right: 1px solid #ccc;">
            <ul class="typeUl" lay-filter="test" style="width: 100%;">

            </ul>
        </div>
    </div>
    <div class="layui-col-md9">
        <nav>
            <i class="layui-icon layui-icon-prev" style="float: left;line-height: 50px;margin-left: 5px;color:#fafbfc "></i>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm allBtn one classBtn">全部</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn planStatus" planStatus="0">未启动</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn planStatus" planStatus="1">进行中</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn planStatus" planStatus="2">已结束</button>
            <%--<button type="button" class="layui-btn layui-btn-primary layui-btn-sm screen classBtn" id="screen" style="width: 120px">更多筛选&nbsp;▼</button>--%>
            <div class="menu">
                <div>
                    <div>
                        <label style="font-weight: bold;">创建时间</label>
                        <ul>
                            <li style="background: white" value="3">最近三月</li>
                            <li style="background: white" value="2">最近一个月</li>
                            <li style="background: white" value="1">最近一周</li>
                        </ul>
                    </div>
                </div>
            </div>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" style="float: right;margin-right: 20px;" id="add">新建计划</button>
            <div style="display: inline-block;border-bottom: 1px solid #ccc;margin-top: 4px;margin-left: 300px;">
                <input type="text" class="search" placeholder="搜索"/>
                <span style="padding: 5px;color: #999;cursor: pointer;">
                <i class="layui-icon layui-icon-search"></i>
            </span>
            </div>

        </nav>
        <div>
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <div class="layui-tab-content">
                    <div class="content">
                        <div class="layui-card-body">
                            <table class="layui-hide" id="plan" lay-filter="plan"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script type="text/html" id="planDome">
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" lay-event="del">批量删除</button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" lay-event="start">批量启动</button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" lay-event="end">批量结束</button>
    </div>
</script>
<script type="text/html" id="planDel">
    <a class="layui-btn  layui-btn-xs layui-btn-primary" lay-event="exa">查看</a>
    <a class="layui-btn  layui-btn-xs" lay-event="edit">编辑</a>
    {{# if (d.planStatus ==0){ }}
    <a class="layui-btn  layui-btn-xs layui-btn-normal" lay-event="start">启动</a>
    <a class="layui-btn  layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
    {{#  } else if(d.planStatus ==2){ }}
    <a class="layui-btn  layui-btn-xs layui-btn-normal" lay-event="start">启动</a>
    <a class="layui-btn  layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
    {{#  } else if(d.planStatus ==1){ }}
    <a class="layui-btn  layui-btn-xs layui-btn-warm" lay-event="end">结束</a>
    {{#  } }}
</script>
</body>
<script>
    $('#addTableDiv .layui-table-main').height($(document.body).height()-100);
    $('.content').height($(window).height());
    $('.classBtn').click(function () {
        var index = $('.classBtn').index(this);
        $('.content:eq("'+index+'")').css('display','block').siblings('.content').css('display','none')
        $(this).toggleClass("one");
        $(this).siblings('button').removeClass("one");
    });

    $('.iconView').click(function () {
        $(this).siblings().eq(3).toggle();
        if($(this).siblings().eq(0).is('.one')){
            $(this).parents('nav').siblings('div').find('.year').children().eq(1).toggle()
            $(this).parents('nav').siblings('div').find('.year').children().eq(2).toggle()
        }else if($(this).siblings().eq(1).is('.one')){
            $(this).parents('nav').siblings('div').find('.quarter').children().eq(1).toggle()
            $(this).parents('nav').siblings('div').find('.quarter').children().eq(2).toggle()
        }else if($(this).siblings().eq(2).is('.one')){
            $(this).parents('nav').siblings('div').find('.month').children().eq(1).toggle()
            $(this).parents('nav').siblings('div').find('.month').children().eq(2).toggle()
        }

    })


    layui.use(['form', 'layedit', 'laydate','layedit','table','element'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,element = layui.element
            ,table = layui.table;

        layedit.build('texPart'); //建立编辑器
        form.render();


        table.render({
            elem: '#plan'
            , url: '/IncomePlan/findIncomePlan'
            , cellMinWidth: 80
            , defaultToolbar: []
            , page: true
            ,toolbar: '#planDome'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'planCode', title: '计划编号',}
                , {field: 'planName', title: '计划名称'}
                , {field: 'planTypeName', title: '计划类别'}
                , {field: 'expenseBudget', title: '支出预算'}
                , {field: 'incomeBudget', title: '收入预估'}
                , {field: 'planStatus', title: '计划状态', templet: function (d) {
                    if(d.planStatus==0){
                        return '未启动'
                    }else if(d.planStatus==1){
                        return '进行中'
                    }else{
                        return '结束'
                    }
                }}
                , {title: '操作',width:260, align: 'center', toolbar: '#planDel'}
            ]]
            ,parseData: function(res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.totleNum, //解析数据长度
                    "data": res.obj //解析数据列表
                };
            }
            , done: function (obj) {

            }
        });

        table.on('toolbar(plan)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data;
            var id=''
            for(var i=0;i<data.length;i++){
                id+=data[i].planId+','
            }
            if (data.length==0){
                layer.msg('请选择一条');
                return false;
            }

            switch(obj.event){
                case 'start':
                    //启动
                    $.ajax({
                        url: '/IncomePlan/editPlanStatus',
                        type: 'post',
                        dataType: 'json',
                        data:{
                            strId:id,
                            Field:'PLAN_STATUS',
                            value:1
                        },
                        success: function (data) {
                            layer.msg('启动成功！');
                            table.reload("plan", {});
                        }
                    });
                    break;
                case 'end':
                    //结束
                    $.ajax({
                        url: '/IncomePlan/editPlanStatus',
                        type: 'post',
                        dataType: 'json',
                        data:{
                            strId:id,
                            Field:'PLAN_STATUS',
                            value:2
                        },
                        success: function (data) {
                            layer.msg('结束成功！')
                            table.reload("plan", {});
                        }
                    });
                    break;
                case 'del':
                    //删除
                    $.ajax({
                        url: '/IncomePlan/deletePlanById',
                        type: 'post',
                        dataType: 'json',
                        data:{
                            strId:id
                        },
                        success: function (data) {
                            layer.msg('删除成功！')
                            table.reload("plan", {});
                        }
                    })
                    break;

            };
        });

        table.on('tool(plan)', function(obj){
            switch(obj.event){
                case 'edit':
                    if(obj.length === 0){
                        layer.msg('请选择一行');
                    } else if(obj.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        location.href='/incomeexpense/plan/add?planId='+obj.data.planId
                    }
                    break;
                case 'delete':
                    if(obj.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        $.ajax({
                            url: '/IncomePlan/deletePlanById',
                            type: 'post',
                            dataType: 'json',
                            data:{
                                strId:obj.data.planId
                            },
                            success: function (data) {
                                layer.msg('删除成功！');
                                table.reload("plan", {});
                            }
                        })
                    }
                    break;
                case 'start':
                    if(obj.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        //启动
                        $.ajax({
                            url: '/IncomePlan/editOrInsertPlan',
                            type: 'post',
                            dataType: 'json',
                            data:{
                                planId:obj.data.planId,
                                planStatus:1
                            },
                            success: function (data) {
                                layer.msg('启动成功！')
                                table.reload("plan", {});
                            }
                        })
                    }
                    break;
                case 'end':
                    if(obj.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        //启动
                        $.ajax({
                            url: '/IncomePlan/editOrInsertPlan',
                            type: 'post',
                            dataType: 'json',
                            data:{
                                planId:obj.data.planId,
                                planStatus:2
                            },
                            success: function (data) {
                                layer.msg('结束成功！')
                                table.reload("plan", {});
                            }
                        })
                    }
                    break;
                case 'exa':
                    location.href='/incomeexpense/plan/planDetails?planId='+obj.data.planId
                    break;
            };
        });

        $(document).on('click', '.planType', function(){

            $(this).css('background','#03a9f4')
            $(this).siblings().css('background', 'rgb(247, 247, 247)')
            table.reload('plan',{
                where:{
                    planTypeId:$(this).attr('plantypeid')
                }
                ,parseData: function(res) { //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.totleNum, //解析数据长度
                        "data": res.obj //解析数据列表
                    };
                }
            })
        });

        $('#screen').click(function () {
            if($(this).is('.one')){
                $('.menu').show();
            }else{
                $('.menu').hide();
            }
        });
        $('.allBtn').click(function () {
            $('.menu').hide()
            table.reload('plan', {
                where:{
                    planStatus: ''
                },parseData: function(res) { //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.totleNum, //解析数据长度
                        "data": res.obj //解析数据列表
                    };
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            })
        })
        $('.planStatus').click(function () {
            $('.menu').hide()
            table.reload('plan',{
                method: 'post',
                where:{
                    planStatus: $(this).attr('planStatus')
                },parseData: function(res) { //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.totleNum, //解析数据长度
                        "data": res.obj //解析数据列表
                    };
                }
            })
        })
        $('.menu ul li').click(function () {
            $(this).toggleClass("one");
            $(this).siblings('li').removeClass("one");
            table.reload('plan',{
                method: 'post',
                where:{
                    timeStatus: $(this).val(),
                    planTypeId:'',
                    planStatus:''
                },parseData: function(res) { //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.totleNum, //解析数据长度
                        "data": res.obj //解析数据列表
                    };
                }
            })
        })
        $('.layui-icon-search').click(function () {
            var search=$('.search').val();
            if($('.search')!=''){
                setTimeout(function () {
                    table.reload('plan',{
                        method: 'get',
                        where:{
                            planName:search
                        },parseData: function(res) { //res 即为原始返回的数据
                            return {
                                "code": 0, //解析接口状态
                                "msg": res.msg, //解析提示文本
                                "count": res.totleNum, //解析数据长度
                                "data": res.obj //解析数据列表
                            };
                        }
                    })
                },100);
            }
        });
    });


    $(function () {
        $.ajax({
            url: "/IncomeType/findIncomType",
            type: "get",
            dataType: 'json',
            success: function (data) {
                var str=''
                for(var i=0;i<data.obj.length;i++){
                    str+=' <li class="planType" planTypeId='+data.obj[i].planTypeId+'><a href="">'+data.obj[i].planTypeName+'</a></li>'
                }
                $('.typeUl').html(str)
            }
        });

    })
    $('#add').click(function () {
        location.href='/incomeexpense/plan/add'
    })
</script>

</html>